<template>
  <div class="app-container">
    <el-row v-if="userId">
      <el-col :span="24">
        <el-card border style="height: 300px; box-sizing: border-box">
          <div style="display: flex; height: 100%; align-items: center">
            <el-row :gutter="20" style="flex: 1; height: 100%; margin-right: 0">
              <el-col :span="8" style="height: 100%">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    height: 200px;
                    border-right: 1px solid #ccc;
                  "
                >
                  <div>
                    <el-avatar
                      size="large"
                      :src="avatarUrl"
                      style="width: 100px; height: 100px; margin-right: 20px"
                    />
                  </div>
                  <div>
                    <div style="font-size: 30px; font-weight: bold">
                      {{ userInfo.name }}
                    </div>
                    <div style="margin: 10px 0">
                      身份证：{{ userInfo.idno }}
                    </div>
                    <div style="margin: 10px 0">
                      居住地：{{ userInfo.jzdxz }}
                    </div>
                    <div
                      style="
                        padding: 0px 15px;
                        background-color: rgb(187, 217, 149);
                        color: #fff;
                        border-radius: 8px;
                        font-size: 12px;
                      "
                    >
                      <dict-tag
                        v-if="userInfo.termType"
                        :options="dict.type.sjsk_term_type"
                        :value="userInfo.termType"
                      />
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" style="height: 200px">
                <div style="height: 100%; border-right: 1px solid #ccc">
                  <div>
                    管理人员：{{ userInfo.fzrInfo }}
                  </div>
                  <div
                    style="margin: 10px 0; display: flex; align-items: center"
                  >
                    <div>风险等级：</div>
                    <div>
                      <dict-tag
                        :options="dict.type.risk_level"
                        :value="userInfo.riskLevel"
                      />
                    </div>
                  </div>
                  <div
                    style="margin: 10px 0; display: flex; align-items: center"
                  >
                    <div>身体状况：</div>
                    <div>
                      <dict-tag
                        :options="dict.type.stzk"
                        :value="userInfo.stzk"
                      />
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" style="height: 200px">
                <div>通知</div>
                <div
                  class="msgView"
                  style="height: 180px; overflow-y: auto; padding-right: 10px"
                >
                  <div
                    style="
                      font-size: 14px;
                      color: rgba(0, 0, 0, 0.4);
                      margin: 10px 0;
                    "
                  >
                    <div>
                      应签到时间:
                      <span style="margin-left: 10px">2023-04-17</span>
                    </div>
                    <div>
                      应检测时间:
                      <span style="margin-left: 10px">2023-04-17</span>
                    </div>
                    <div>
                      应谈话时间:
                      <span style="margin-left: 10px">2023-04-17</span>
                    </div>
                    <div>
                      应家访时间:
                      <span style="margin-left: 10px">2023-04-17</span>
                    </div>
                  </div>
                  <div
                    v-for="(item, index) in [1, 3, 4, 4, 4]"
                    :key="index"
                    style="display: flex; align-items: center; font-size: 14px"
                  >
                    <i
                      class="el-icon-warning-outline"
                      style="color: rgb(64, 158, 255); margin-right: 14px"
                    />
                    <div style="flex: 1">他有一条尿检通知还未处理</div>
                    <div style="color: rgb(64, 158, 255); cursor: pointer">
                      查看详情
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div
              style="
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                align-content: flex-start;
                justify-content: space-between;
                width: 240px;
              "
            >
              <el-button
                size="mini"
                type="primary"
                class="btnView"
                @click="toDocument"
              >档案
              </el-button>
              <el-button
                class="btnView"
                size="mini"
                type="warning"
                :disabled="userInfo && userInfo.tstg==='Y'"
                @click="tstgUser"
              >{{ userInfo && userInfo.tstg === 'Y' ? '已脱失脱管' : '脱失脱管' }}
              </el-button>
              <el-button
                class="btnView"
                size="mini"
                type="success"
                @click="toDocument"
              >人员编辑
              </el-button>
              <el-button
                v-if="false"
                class="btnView"
                size="mini"
                type="warning"
              >发起聊天
              </el-button>
              <el-button
                class="btnView"
                size="mini"
                type="info"
                @click="toDocument"
              >重新签订
              </el-button>
              <el-button
                class="btnView"
                size="mini"
                type="success"
                v-if="false"
              >康复心理测评
              </el-button>
              <el-button class="btnView" size="mini" type="warning" @click="terminateUser" :disabled="!!userInfo.zzyy">
                {{userInfo.zzyy ? '已中止/终止' : '中止/终止'}}
              </el-button>
              <el-button class="btnView" size="mini" type="warning"
                         v-if="userInfo && userInfo.riskLevel==='3'" @click="toChangeTypeForm">人员类型转换
              </el-button>
              <el-button
                class="btnView"
                size="mini"
                type="warning"
                @click="chooseKfcs"
              >康复场所
              </el-button>
              <el-button
                class="btnView"
                size="mini"
                type="danger"
                @click="handleDelete"
              >删除
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col style="height: calc(100vh - 440px); margin-top: 10px" :span="24">
        <el-row :gutter="5" style="height: 100%">
          <el-col :span="10" style="height: 100%">
            <el-card
              style="height: 100%; box-sizing: border-box"
              border
              class="event-card"
              :body-style="{ padding: '10px' }"
            >
              <div slot="header" class="clearfix">
                <span>进行中的项目</span>
              </div>
              <el-row
                :gutter="10"
                class="scrollRow"
                style="height: calc(100vh - 500px); overflow-y: scroll"
              >
                <el-col :span="12">
                  <user-event-card
                    ref="qd"
                    type="qd"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="jcjh"
                    type="jcjh"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="jf"
                    type="jf"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="th"
                    type="th"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="leave"
                    type="leave"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="gkcs"
                    type="gkcs"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="wfxy"
                    type="wfxy"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="dzbg"
                    type="dzbg"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="yzwfxy"
                    type="yzwfxy"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="ywwczl"
                    type="ywwczl"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="wgbg"
                    type="wgbg"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="ndkc"
                    type="ndkc"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="bfjh"
                    type="bfjh"
                    :user-id="userId"
                    :open-side-ref-func="getEventSideRef"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="bfqk"
                    type="bfqk"
                    :user-id="userId"
                    :open-side-ref="$refs.userEventSide"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="bfcx"
                    type="bfcx"
                    :user-id="userId"
                    :open-side-ref="$refs.userEventSide"
                  />
                </el-col>
                <el-col :span="12">
                  <user-event-card
                    ref="rylxzh"
                    type="rylxzh"
                    :user-id="userId"
                    :open-side-ref="$refs.userEventSide"
                  />
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="7" style="height: 100%">
            <el-card border style="height: 100%">
              <div slot="header" class="clearfix">
                <span>人物关系</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  icon="refresh"
                  @click="$refs.relation.refresh()"
                >刷新
                </el-button>
              </div>
              <user-relation
                v-if="userId"
                ref="relation"
                :user-id="userId"
                style="height: calc(100vh - 520px)"
              />
            </el-card>
          </el-col>
          <el-col :span="7" style="height: 100%">
            <el-card border style="height: 100%; position: relative">
              <div slot="header" class="clearfix">
                <span>电子地图</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  icon="refresh"
                  @click="$refs.map.refresh()"
                >刷新
                </el-button>
              </div>
              <user-pos-map
                v-if="userId"
                ref="map"
                :user-id="userId"
                style="height: calc(100vh - 520px); position: relative"
              />
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <user-event-side-drawer ref="userEventSide" :user-id="userId" @refresh="handleDrawerClose"/>
    <change-type-form ref="changeTypeForm"/>
    <user-kfcs-side-drawer ref="userKfcsSide" :user-id="userId" @refresh="loadUserFullInfo"/>
    <terminate-user ref="terminateUser" @refresh="loadUserFullInfo"/>
  </div>
</template>

<script>
import UserPosMap from '@/views/user/user_home/userPosMap.vue'
import UserRelation from '@/views/user/user_home/userRelation.vue'
import UserEventSideDrawer from '@/views/user/user_home/component/UserEventSideDrawer.vue'
import UserEventCard from '@/views/user/user_home/component/UserEventCard.vue'
import ChangeTypeForm from "@/views/event/changeType/changeTypeForm.vue";
import UserKfcsDrawer from "@/views/user/user_home/component/UserKfcsDrawer.vue";
import {delUser, getUser, tstgUser} from "@/api/user/userInfo";
import UserKfcsSideDrawer from "@/views/user/user_home/component/UserKfcsDrawer.vue";
import TerminateUser from "@/views/user/user_home/component/TerminateUser.vue";

export default {
  name: 'UserHome',
  components: {
    UserKfcsSideDrawer,
    UserEventCard, UserEventSideDrawer, UserRelation, UserPosMap, ChangeTypeForm, UserKfcsDrawer,
    TerminateUser
  },
  dicts: ['sjsk_term_type', 'risk_level', 'stzk'],
  data() {
    return {
      userId: undefined,
      userSubType: undefined,
      avatarUrl: undefined,
      userInfo: {}
    }
  },
  mounted() {
    this.userId = this.$route.query.userId
    this.userSubType = this.$route.query.userSubType
    this.loadUserFullInfo()
  },
  methods: {
    chooseKfcs() {
      this.$refs.userKfcsSide.open(this.userInfo)
    },
    handleDrawerClose(type) {
      this.$refs[type].loadData()
    },
    loadUserFullInfo() {
      getUser(this.userId).then((res) => {
        this.userInfo = res.data
        if (this.userInfo && this.userInfo.avatarDetail && this.userInfo.avatarDetail.length > 0) {
          this.avatarUrl = this.userInfo.avatarDetail[0]
        }
      })
    },
    getEventSideRef() {
      return this.$refs.userEventSide
    },
    toDocument() {
      const {businessSubType} = this.userInfo
      switch (businessSubType) {
        case 'drug_sjsk':
          this.$router.push({
            path: "/user/sjsk-detail/index",
            query: {sjskId: this.userId},
          });
          break
        case 'drug_zdgz':
          this.$router.push({
            path: "/user/zdgz-detail/index",
            query: {zdgzId: this.userId},
          });
          break
        default:
          break
      }
    },
    toChangeTypeForm() {
      const {riskLevel} = this.userInfo
      if (riskLevel !== '3') {
        this.$notify.warning('只有低风险人员可以进行类型转换')
        return
      }
      this.$refs.changeTypeForm.handleAdd(this.userId)
    },
    tstgUser() {
      const {tstg} = this.userInfo
      if (tstg === 'Y') {
        this.$notify.warning('该吸毒人员已处于脱失脱管状态')
        return
      }
      this.$confirm("确定脱失脱管该吸毒人员吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        tstgUser(this.userId).then(res => {
          this.$message.success('操作成功')
          this.loadUserFullInfo()
        })
      }).catch(() => {
      })
    },
    handleDelete() {
      this.$modal
        .confirm('是否确认删除人员的所有相关数据项？')
        .then(() => {
          this.loading = true;
          return delUser(this.userId);
        })
        .then(() => {
          this.loading = false;
          this.$modal.msgSuccess("删除成功");
          this.$tab.closePage();
          this.$router.push({path: "/index"})
        })
        .catch(() => {
        })
        .finally(() => {
          this.loading = false;
        });
    },
    terminateUser() {
      this.$refs.terminateUser.openTerminate(this.userInfo)
    },
  }
}
</script>

<style scoped>
.btnView {
  margin-bottom: 20px;
  width: 100px;
  margin-left: 0 !important;
}

.scrollRow::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  /* background-color: #00a0e9; */
}

.scrollRow::-webkit-scrollbar-track {
  border-radius: 2px;
  /* background-color: #00a0e9; */
}

.scrollRow::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgb(64, 158, 255);
  background-color: #fff;
}

.msgView::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  /* background-color: #00a0e9; */
}

.msgView::-webkit-scrollbar-track {
  border-radius: 2px;
  /* background-color: #00a0e9; */
}

.msgView::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgb(64, 158, 255);
  background-color: #fff;
}
</style>
